#{extends 'main.html' /}
#{set title:'Register' /}

<script type="text/javascript" src="@{'/public/javascripts/anytime.js'}" ></script>
<link type="text/css" rel="stylesheet" href="@{'/public/stylesheets/anytime.css'}" />


<style type="text/css" media="screen">
	html, body{
		margin:0px;
		padding:0px;
		height:100%;
		overflow: inherit;
	}	
</style>


<script>
    function submitF1() {
    	$("#c_id").val(''+($("#co_id").val()));
    	$("#s_id").val(''+($("#st_id").val()));
    	$("#form2").submit();
    }
    function submitF() {
    	$("#form1").submit();
    }
   
    
</script>

<div id = "register">
<h1> Register Course </h1>

<form id ="form1" action="@{Application.registerCourse()}" method="POST">
    <table border="0">
    <tbody>
    <tr><td>Student</td> 
    <td><select size="1" name="student_id" id = "st_id"> 
            #{list items:models.Student.findAll(), as:'su'}
                #{if su.id == student_id}
                <option selected="selected" value="${su.id}">${su.fname} ${su.mname} ${su.lname}</option>
                #{/if}
                #{else}
                 <option value="${su.id}">${su.fname} ${su.mname} ${su.lname}</option>
                #{/else}
            #{/list}
           </select> <br></td>
    
    </tr>
    
    <tr><td>Course</td><td><select size="1" name="course_id" id = "co_id" onchange="submitF1()"> 
           #{list items:models.Course.findAll(), as:'su'}
                #{if su.id == course_id}
                <option selected="selected" value="${su.id}">${su.name} - ${su.getType()}</option>
                #{/if}
                #{else}
                 <option value="${su.id}">${su.name} - ${su.getType()}</option>
                #{/else}
            #{/list} 
           </select> <br></td>
           
           </tr>
    
    #{if !teachers.isEmpty()}
    <tr><td>Teacher</td><td><select size="1" name="teacher_id" > 
             #{list items:teachers, as:'su'}
                #{if su.id == teacher_id}
                <option selected="selected" value="${su.id}">${su.name}</option>
                #{/if}
                #{else}
                 <option value="${su.id}">${su.name}</option>
                #{/else}
            #{/list}
           </select> </td></tr>
   
    </tbody>
    </table>
   	<br> 
    &nbsp;Date #1 &nbsp;&nbsp;&nbsp;&nbsp;<input type="text" id = "date1" name="date1" required ="required"/>
    <br>
    <br>
    <div id="date">
    
    &nbsp;Date #2 &nbsp;&nbsp;&nbsp;&nbsp;<input type="text" id = "date2" name="date2" value="" />
    <br>
    <br>
    </div>
    
    #{/if}
    
    #{else}
    </tbody>
    </table>
    <h3 style="color: red;">No teachers assigned for this course !</h3>
   	#{/else}
    <br>
    
   <!--  <input type="submit" value="Create" disabled="disabled"/>--> 
    
</form>

	#{if !teachers.isEmpty() && c.type.equals('Basic')}
	<button onclick="displayDate2()" id="b1">Twice a Week</button>
	#{/if}
	
	<button onclick="submitF()">Register and Pay !</button>
<form id="form2" action="@{Application.registerCourse()}" method="POST">

<input type="hidden" id="s_id" name="student_id">
<input type="hidden" id="c_id" name="course_id">

<script type="text/javascript">
     $("#c_id").val(''+($("#co_id").val()));
     </script>
</form>
<br>
<br><br><br>

</div>


<script type="text/javascript">

	var rangeDemoFormat = "%d/%m/%Y %H:%i";
	var e = new Date();
	var l = new Date();
	var sD = true;
	
	l.setYear(2050);
	
	AnyTime.picker("date1",
	        { earliest: e,
	          format: rangeDemoFormat,
	          latest: l,
	          placement: "inline",
	          hideinput:true
	        
	        } );
	        
		
	function displayDate2() {
    	
		if(sD)
		{
			$("#date").show(500);
			sD = false;
			$("#b1").html("Once a Week");
			AnyTime.picker("date2",
			        { earliest: e,
			          format: rangeDemoFormat,
			          latest: l,
			          placement: "inline",
			          hideinput:true
			        } );
		}
		else {
			$("#date").hide(500);
			sD = true;
			$("#b1").html("Twice a Week");
			$("#date2").val('');
		}
    }
	
	$("#date").hide(500);
	
		
</script>

